<template>
  <div style="width: 50%; margin: 20px auto; display: flex; grid-gap: 50px">
    <div style="width: 180px">
      <div style="font-size: 18px; color: #555555; height: 50px; line-height: 50px; text-align: center; background-color: #ecebeb">热门榜单</div>
      <div @click="changeFlag('PLAYLIST')" :class="{'topActive' : isActive('PLAYLIST')}" style="height: 50px; line-height: 50px; font-size: 16px; text-align: center; cursor: pointer; border-bottom: 1px solid #cccccc">🔥热门歌单Top5</div>
      <div @click="changeFlag('ALBUM')" :class="{'topActive' : isActive('ALBUM')}" style="height: 50px; line-height: 50px; font-size: 16px; text-align: center; cursor: pointer; border-bottom: 1px solid #cccccc">🔥热门专辑Top5</div>
      <div @click="changeFlag('SINGER')" :class="{'topActive' : isActive('SINGER')}" style="height: 50px; line-height: 50px; font-size: 16px; text-align: center; cursor: pointer; border-bottom: 1px solid #cccccc">🔥热门歌手Top5</div>
      <div @click="changeFlag('SONG')" :class="{'topActive' : isActive('SONG')}" style="height: 50px; line-height: 50px; font-size: 16px; text-align: center; cursor: pointer; border-bottom: 1px solid #cccccc">🔥热门歌曲Top5</div>
    </div>
    <div style="flex: 1">
      <div style="font-size: 24px">酷鱼飙升榜</div>
      <div style="margin-top: 20px">
        <div v-if="data.flag === 'PLAYLIST'">
          <div style="display: flex; grid-gap: 20px; padding: 15px 0; border-bottom: 1px solid #cccccc" v-for="item in data.playlistData">
            <img :src="item.img" alt="" style="width: 80px; height: 80px; border-radius: 5px">
            <div style="flex: 1">
              <div style="display: flex; grid-gap: 20px; align-items: center">
                <div style="font-size: 18px; cursor: pointer" @click="router.push('/front/playlistDetail?id=' + item.id)">{{ item.name }}</div>
                <div>🔥{{ item.hot }}</div>
              </div>
              <div style="margin-top: 10px; font-size: 13px; color: #666666" class="line2">{{ item.description }}</div>
            </div>
          </div>
        </div>
        <div v-if="data.flag === 'ALBUM'">
          <div style="display: flex; grid-gap: 20px; padding: 15px 0; border-bottom: 1px solid #cccccc" v-for="item in data.albumData">
            <img :src="item.img" alt="" style="width: 80px; height: 80px; border-radius: 5px">
            <div style="flex: 1">
              <div style="display: flex; grid-gap: 20px; align-items: center">
                <div style="font-size: 18px; cursor: pointer" @click="router.push('/front/albumDetail?id=' + item.id)">《{{ item.name }}》</div>
                <div>🔥{{ item.hot }}</div>
              </div>
              <div style="margin-top: 10px; font-size: 13px; color: #666666" class="line2">{{ item.description }}</div>
            </div>
          </div>
        </div>
        <div v-if="data.flag === 'SINGER'">
          <div style="display: flex; grid-gap: 20px; padding: 15px 0; border-bottom: 1px solid #cccccc" v-for="item in data.singerData">
            <img :src="item.avatar" alt="" style="width: 80px; height: 80px; border-radius: 5px">
            <div style="flex: 1">
              <div style="display: flex; grid-gap: 20px; align-items: center">
                <div style="font-size: 18px; cursor: pointer" @click="router.push('/front/singerDetail?id=' + item.id)">《{{ item.name }}》</div>
                <div>🔥{{ item.hot }}</div>
              </div>
              <div style="margin-top: 10px; font-size: 13px; color: #666666" class="line2">{{ item.description }}</div>
            </div>
          </div>
        </div>
        <div v-if="data.flag === 'SONG'">
          <div style="display: flex; grid-gap: 20px; padding: 15px 0; border-bottom: 1px solid #cccccc" v-for="item in data.songData">
            <img :src="item.singerAvatar" alt="" style="width: 80px; height: 80px; border-radius: 5px">
            <div style="flex: 1">
              <div style="display: flex; grid-gap: 20px; align-items: center">
                <div style="font-size: 18px; cursor: pointer" @click="router.push('/front/songDetail?id=' + item.id)">{{ item.name }}</div>
                <div>🔥{{ item.hot }}</div>
              </div>
              <div style="margin-top: 5px; color: #666666">
                <span>歌手：{{ item.singerName }}</span>
                <span style="margin-left: 20px">时长：{{ item.duration }}</span>
              </div>
              <div style="margin-top: 5px; color: #666666">发布时间：{{ item.time }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const data = reactive({
  flag: 'PLAYLIST',
  playlistData: [],
  albumData: [],
  singerData: [],
  songData: [],
})

const isActive = (flag) => {
  return data.flag === flag
}

const changeFlag = (flag) => {
  data.flag = flag
}

const loadPlaylistTop5 = () => {
  request.get('/playlist/selectTop5').then(res => {
    if (res.code === '200') {
      data.playlistData = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const loadAlbumTop5 = () => {
  request.get('/album/selectTop/5').then(res => {
    if (res.code === '200') {
      data.albumData = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const loadSingerTop5 = () => {
  request.get('/singer/selectTop/5').then(res => {
    if (res.code === '200') {
      data.singerData = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const loadSongTop5 = () => {
  request.get('/sing/selectTop5').then(res => {
    if (res.code === '200') {
      data.songData = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadPlaylistTop5()
loadAlbumTop5()
loadSingerTop5()
loadSongTop5()
</script>
<style>
.topActive {
  background-color: #169af3;
  color: white;
}
</style>